<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>诊疗金</title>
    <!-- Path to Framework7 Library CSS-->
    <link rel="stylesheet" href="../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
    <!-- Path to your custom app styles-->
    <link rel="stylesheet" href="../css/my-app.css">
    <link rel="stylesheet" href="../css/ekang.css"/>
    <style type="text/css">
        html {
            overflow: hidden;
        }

        .content-back {
            position: relative;
            background-color: white;
            width:95%;
            height: 63px;
            margin-top: 15px;
            margin-left: 2.5%;
            -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.16);
            -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.16);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.16);
        }

        .content-redImg {
            position: absolute;
            width: 79px;
            height: 63px;
            z-index: 100;
        }

        .content-money {
            font-size: 36px;
            color: #fff;
            line-height: 63px;
            text-align: center;
        }
        .content-money-subText {
            position: absolute;
            font-size: 25px;
            color: #666666;
            top: 5px;
            left: 80px;
        }

        .content-subDetail {
            position: absolute;
            font-size: 9px;
            color: #808080;
            top: 40px;
            left: 80px;
        }

        .content-rightText {
            position: absolute;
            font-size: 9px;
            color: #43af80;
            top: 10px;
            right: 0;
            text-align: right;
        }
    </style>
</head>
<body>

<div class="views tabs toolbar-through">
    <!--导航条-->
    <!-- Second view (for second wrap)-->
    <div id="view" class="view view-main tab active">
        <!-- We can make with view with navigation, let's add Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner" style="background-color: #38a16d">
                <div class="left" id="back">
                    <a href="#" class="back link">
                        <i class="icon icon-back color-white" style="color: white"></i>
                        <span style="color: white">返回</span>
                    </a>
                </div>
                <div class="center sliding" style="color: white">诊疗金</div>
                <div class="right" id="right">
                        <span style="color: white">诊疗金使用说明</span>
                </div>
            </div>
        </div>

        <div class="pages navbar-through">
            <div data-page="index-2" class="page page-on-center">
                <div class="page-content pull-to-refresh-content infinite-scroll">
                    <!-- 默认的下拉刷新层 -->
                    <div class="pull-to-refresh-layer">
                        <div class="preloader"></div>
                        <div class="pull-to-refresh-arrow"></div>
                    </div>

                    <div id="content-list">
                    </div>

                    <!-- 加载提示符 -->
                    <div class="infinite-scroll-preloader">
                        <div class="preloader"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript" src="../js/my-app.js"></script>
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/ekang.js"></script>
<script>
    $(function () {
        var pageIndex = 1;
        var money = getQueryString("allMoney");

        var mycenter = {
            getdiagnosis: function () {
                $.ajax({
                    type: 'GET',
                    url: textUrl + '/diagnosis/UserCouponList',
                    data: {         // 需要于客户端同步
                        uid : $.cookie("local_userId"),
                        total_amount : money,
                        page_size : '15',
                        page_index : pageIndex
                    },
                    dataType: 'jsonp',
                    jsonp: 'callback',
                    success: function (result) {
                        if (result.ret == 0) {
                            var moneyArr = result.data;
                            var item = '';
                            $.each(moneyArr, function (i, o) {

                                item += '<div class="content-back" data-index="'+ o.is_can_use+'" data-id="'+ o.id +'" data-name="'+ o.amount+'" onclick="diag_money(this)">';
                                if(o.is_can_use == 0){
                                    item += '<img src="../img/mypage_img/coupon_not_can_use.png" alt="红色" class="content-redImg"/>';
                                }else{
                                    item += '<img src="../img/mypage_img/btn_shadowred.png" alt="红色" class="content-redImg"/>';
                                }
                                item += '<span class="content-redImg content-money">'+ o.amount+'</span>';
                                item += '<span class="message content-money-subText">元诊疗金</span>';
                                item += '<span class="message content-subDetail">'+ o.end_on+'过期&nbsp'+ o.name+'</span>';
                                item += '<span class="message content-rightText">'+ o.type_text +'</span>';
                                item += ' </div>';

                            });
//                            $('#content-list').html(item);

                            // 加载完毕需要重置
                            myApp.pullToRefreshDone();

                            // 加载数据
                            // 重置加载flag
                            loading = false;
                            if (lastIndex >= maxItems) {
                                // 加载完毕，则注销无限加载事件，以防不必要的加载
                                myApp.detachInfiniteScroll($('.infinite-scroll'));
                                // 删除加载提示符
                                $('.infinite-scroll-preloader').remove();
                                return;
                            }
                            // 如果正在加载，则退出
                            if (pageIndex >1 ){
                                // 添加新条目
                                $('#content-list').append(item);
                            }else{
                                $('#content-list').html(item);
                            }

                            // 更新最后加载的序号
                            lastIndex = $('#content-list').length;

                            if(result.data.length <= 20){
                                $('.infinite-scroll-preloader').hide();
                            }else{
                                $('.infinite-scroll-preloader').show();
                            }

                        } else {
                            alert(result.msg);
                        }
                    }
                });
            },
        };
        mycenter.getdiagnosis();


        $('#back').on('click', function () {
            history.back();
        });

        $('#right').on('click', function () {
            location.href = "http://ekang.ren/index/instruction";
        });

        // 刷新
        var myApp = new Framework7();
        var $$ = Dom7;
        // 下拉刷新页面
        var ptrContent = $$('.pull-to-refresh-content');
        // 添加'refresh'监听器
        ptrContent.on('refresh', function (e) {

            pageIndex=1;
            mycenter.getdiagnosis();
        });

        // 加载数据
        var loading = false;
        // 上次加载的序号
        var lastIndex = $('#content-list').length;
        // 最多可加载的条目
        var maxItems = 20;
        // 注册'infinite'事件处理函数
        $$('.infinite-scroll').on('infinite', function () {
            // 如果正在加载，则退出
            if (loading) return;
            // 设置flag
            loading = true;
            pageIndex++;
            mycenter.getdiagnosis();
        });
    });

    function diag_money(e) {
        var id=e.getAttribute("data-id");
        var name=e.getAttribute("data-name");
        var is_can = e.getAttribute("data-index");
        var money = getQueryString("allMoney");

        if(is_can == 1){
            $.cookie('dia_name', name, { expires: 7,path: '/' });
            $.cookie('dia_id', id, { expires: 7,path: '/' });
            $.cookie('severMoney', money, { expires: 7,path: '/' });
            history.back();
        }else {
            alert("红包已过期,请重新选择");
            return;
        }

    }
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="../js/weixin2.js"></script>
</body>
</html>